<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions">
    <ui:composition template="/view/templates/layout.xhtml">
        <ui:define name="title">Consulta</ui:define>
        <ui:define name="menu">
            <ui:include src="/view/templates/med-menu.xhtml"/>
        </ui:define>
        <ui:define name="toolbar">
            <h:form id="formCitaButtons" prependId="true">
                <p:toolbar>  
                    <p:toolbarGroup align="left">
                        <p:outputLabel value="#{msg.tlb_Consulta}" style="margin-top: 5px; margin-left: 5px; "/>
                        <p:separator/>
                    </p:toolbarGroup>
                    <p:toolbarGroup align="right">
                        <p:commandButton id="btnNuevo" styleClass="ui-button-custome" value="#{msg.grn_botonNuevo}"  
                                         icon="ui-icon-plus"
                                         update=":formCitaAlta :formCitaConsulta :growl" 
                                         actionListener="#{ConsultaController.executeChangeToCreate}"/>
                        <p:commandButton value="#{msg.grn_botonConsultar}" styleClass="ui-button-custome"
                                         icon="ui-icon-folder-open"
                                         update=":formCitaAlta :formCitaConsulta :growl"
                                         actionListener="#{ConsultaController.executeConsultaCitas}"/>
                    </p:toolbarGroup>
                </p:toolbar>
                <br/>
            </h:form>
        </ui:define>
        <ui:define name="body">
            <p:growl id="growl" globalOnly="true" showSummary="true" showDetail="true" autoUpdate="true" />

            <h:form id="formCitaAlta" prependId="false" >
                <h:panelGroup rendered="#{ConsultaController.renderPanelAlta}">
                    <div class="row">
                        <div class="col-md-offset-2 col-md-8">
                            <div class="panel panel-primary">
                                <div class="panel-heading">Ficha paciente</div>
                                <div class="panel-body">
                                    <div class="container" style="margin-top: 10px !important">  
                                        <p:panelGrid>
                                            <p:row>
                                                <p:column><p:outputLabel value="#{msg.grn_datos_Nombre}"/></p:column>
                                                <p:column><p:outputLabel value="#{msg.obj_personaApPaterno}"/></p:column>
                                                <p:column><p:outputLabel value="#{msg.obj_personaApMaterno}"/></p:column>
                                                <p:column><p:outputLabel value="#{msg.obj_pacienteNoSeguroSocial}"/></p:column>

                                            </p:row>
                                            <p:row>
                                                <p:column><h:outputText value="#{idPacienteParam.nombre}"/></p:column>
                                                <p:column><h:outputText value="#{idPacienteParam.apPaterno}"/></p:column>
                                                <p:column><h:outputText value="#{idPacienteParam.apMaterno}"/></p:column>
                                                <p:column><h:outputText value="#{idPacienteParam.noSeguroSocial}"/></p:column>
                                            </p:row>
                                        </p:panelGrid>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-offset-2 col-md-8">
                            <div class="panel panel-primary">
                                <div class="panel-heading">Crear consulta</div>
                                <div class="panel-body">
                                    <div class="container">  
                                        <p:panelGrid>
                                            <p:row>
                                                <p:column>      
                                                    <p:outputLabel value="#{msg.mng_consulta_FechaI}:" />
                                                </p:column>
                                                <p:column>
                                                    <p:calendar id="fechaInicio" value="#{ConsultaController.createConsulta.fechaInicioDate}" 
                                                                styleClass="ui-calendar-custome"
                                                                placeholder="#{msg.mng_consulta_FechaI}"
                                                                pattern="yyy-MM-dd HH:mm:ss"
                                                                required="true"
                                                                requiredMessage="#{msg.vld_campoNecesario}"/>

                                                </p:column>
                                                <p:column>
                                                    <p:message for="fechaInicio"/>
                                                </p:column>
                                            </p:row>
                                            <p:row>
                                                <p:column>      
                                                    <p:outputLabel value="#{msg.mng_consulta_FechaF}:"/>
                                                </p:column>
                                                <p:column>
                                                    <p:calendar id="fechaFinal" value="#{ConsultaController.createConsulta.fechaFinalDate}" 
                                                                styleClass="ui-calendar-custome"
                                                                placeholder="#{msg.mng_consulta_FechaF}"
                                                                pattern="yyy-MM-dd HH:mm:ss"
                                                                required="true"
                                                                requiredMessage="#{msg.vld_campoNecesario}"/>
                                                </p:column>
                                                <p:column>
                                                    <p:message for="fechaFinal"/>
                                                </p:column>
                                            </p:row>
                                            <p:row>
                                                <p:column>      
                                                    <p:outputLabel value="#{msg.mng_consulta_Hospital}"/>                                               
                                                </p:column>
                                                <p:column>
                                                    <p:selectOneMenu id="hospital" value="#{ConsultaController.createConsulta.hospital.idHospital}" 
                                                                     style="width: 185px  !important"
                                                                     required="true"
                                                                     requiredMessage="#{msg.vld_campoNecesario}">
                                                        <f:selectItem itemLabel="#{msg.grn_selectOption}" itemValue=""/>
                                                        <f:selectItems value="#{ConsultaController.catalogoHospitales}" var="hopsital" 
                                                                       itemLabel="#{hopsital.hospital}" itemValue="#{hopsital.idHospital}"/>
                                                    </p:selectOneMenu>
                                                </p:column>
                                                <p:column>
                                                    <p:message for="hospital"/>
                                                </p:column>
                                            </p:row>
                                            <p:row>
                                                <p:column>     
                                                    <p:outputLabel value="#{msg.mng_consulta_Detalle}:"/>
                                                </p:column>
                                                <p:column> 
                                                    <p:inputTextarea value="#{ConsultaController.createConsulta.detalles}" style="width: 350px"  autoResize="true"/>
                                                </p:column>
                                            </p:row>

                                        </p:panelGrid>
                                    </div>
                                </div>
                                <div class="panel-footer">
                                    <center>
                                        <p:commandButton value="#{msg.grn_botonAceptar}"  
                                                         styleClass="ui-button-custome" update=":formCitaAlta"
                                                         actionListener="#{ConsultaController.executeCrearCita}"/> 
                                        <p:commandButton id="cBLimpiar" value="#{msg.grn_botonLimpiar}"  styleClass="ui-button-custome" >
                                            <p:ajax update=":formCitaAlta" resetValues="true" />  
                                        </p:commandButton>
                                    </center>
                                </div>
                            </div>
                        </div>
                    </div>
                </h:panelGroup>
            </h:form>

            <h:form id="formCitaConsulta" prependId="false" >


                <h:panelGroup rendered="#{ConsultaController.renderPanelConsulta}">
                    <h:panelGroup rendered="#{not (idPacienteParam eq null)}">
                        <div class="row">
                            <div class="col-md-offset-2 col-md-8">
                                <div class="panel panel-primary">
                                    <div class="panel-heading">Ficha paciente</div>
                                    <div class="panel-body">
                                        <div class="container" style="margin-top: 10px !important">  
                                            <p:panelGrid>
                                                <p:row>
                                                    <p:column><p:outputLabel value="#{msg.grn_datos_Nombre}"/></p:column>
                                                    <p:column><p:outputLabel value="#{msg.obj_personaApPaterno}"/></p:column>
                                                    <p:column><p:outputLabel value="#{msg.obj_personaApMaterno}"/></p:column>
                                                    <p:column><p:outputLabel value="#{msg.obj_pacienteNoSeguroSocial}"/></p:column>

                                                </p:row>
                                                <p:row>
                                                    <p:column><h:outputText value="#{idPacienteParam.nombre}"/></p:column>
                                                    <p:column><h:outputText value="#{idPacienteParam.apPaterno}"/></p:column>
                                                    <p:column><h:outputText value="#{idPacienteParam.apMaterno}"/></p:column>
                                                    <p:column><h:outputText value="#{idPacienteParam.noSeguroSocial}"/></p:column>
                                                </p:row>
                                            </p:panelGrid>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </h:panelGroup>
                    <pe:timeline id="timeline" value="#{ConsultaController.timeLineModel}"  height="400px"
                                 editable="delete" 
                                 start="#{ConsultaController.startTimeLine}"  
                                 end="#{ConsultaController.endTimeLine}"  
                                 widgetVar="timelineWdt" >  
                        <p:ajax event="select" listener="#{ConsultaController.selectTimeLine}" oncomplete="PF('wdgtActualizar').show()"
                                update=":formCitaActualizar :formCitaActualizar:fluidDispay"/>
                    </pe:timeline>  
                </h:panelGroup>
            </h:form>

            <h:form id="formCitaActualizar" prependId="false">
                <p:dialog header="Aztualizar" widgetVar="wdgtActualizar" modal="true" width="700" >
                    <p:panelGrid id="fluidDispay">
                        <p:row>
                            <p:column><p:outputLabel value="#{msg.mng_consulta_Hospital}"/></p:column>
                            <p:column>
                                <p:selectOneMenu value="#{ConsultaController.selectConsulta.hospital.idHospital}">
                                    <f:selectItem itemLabel="#{msg.grn_selectOption}" itemValue=""/>
                                    <f:selectItems value="#{ConsultaController.catalogoHospitales}" var="hopsital" 
                                                   itemLabel="#{hopsital.hospital}" itemValue="#{hopsital.idHospital}"/>
                                </p:selectOneMenu>
                            </p:column>
                        </p:row>
                        <p:row>
                            <p:column><p:outputLabel value="#{msg.mng_consulta_FechaI}:" /></p:column>
                            <p:column>
                                <p:calendar value="#{ConsultaController.selectConsulta.fechaInicioDate}" styleClass="ui-calendar-custome"
                                            pattern="yyy-MM-dd HH:mm:ss"/>
                            </p:column>
                        </p:row>
                        <p:row>
                            <p:column><p:outputLabel value="#{msg.mng_consulta_FechaF}:"/></p:column>
                            <p:column>
                                <p:calendar value="#{ConsultaController.selectConsulta.fechaFinalDate}" styleClass="ui-calendar-custome"
                                            pattern="yyy-MM-dd HH:mm:ss"/>
                            </p:column>
                        </p:row>
                        <p:row>
                            <p:column><p:outputLabel value="#{msg.mng_consulta_Detalle}:"/></p:column>
                            <p:column>
                                <p:inputTextarea id="txAreaDetails" value="#{ConsultaController.selectConsulta.detalles}" styleClass="textareaT"
                                                 style="width: 400px"  autoResize="true"/>
                            </p:column>
                        </p:row>
                    </p:panelGrid>


                    <f:facet name="footer" >
                        <center>                   

                            <p:commandButton value="#{msg.grn_botonActulizar}" actionListener="#{ConsultaController.executeActulizarCita}"
                                             update=":growl"
                                             onclick="PF('wdgtActualizar').hide()" styleClass="ui-button-custome"/>  
                            <p:commandButton value="#{msg.grn_botonEliminar}" actionListener="#{ConsultaController.executeEliminarCita}"
                                             update=":growl"
                                             onclick="PF('wdgtActualizar').hide()" styleClass="ui-button-custome"/>  
                            <p:commandButton value="#{msg.grn_botonCancelar}" onclick="PF('wdgtActualizar').hide()" styleClass="ui-button-custome"/> 
                            <p:commandButton value="Prueba Medica"
                                             rendered="#{not (empty ConsultaController.selectConsulta.archivoPrueba)
                                                         and !(ConsultaController.pacienteCurrent eq null)}"
                                             actionListener="#{ConsultaController.executeCrearReporte}" 
                                             styleClass="ui-button-custome"
                                             ajax="false"/> 
                        </center>
                    </f:facet>
                </p:dialog>  
            </h:form>

        </ui:define>
    </ui:composition>
</html>

